{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/monitoring_details.js"></script>
    <link rel="stylesheet" href="../../static/administrative/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .file {
            position: relative;
            display: inline-block;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .li-class{
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }
        .preserve{
            height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px
        }
        table{
            border-collapse:collapse;
            table-layout: fixed;
            {#border-spacing: 0;#}
        }
        td{
            {#border-top: red;#}
            border-left: 1px solid red;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
            {#border-collapse:collapse;#}
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="document.html" style="color: #0b0b0b;">
                <i class="iconfont icon-gongwenfawen"></i>
                <span> 公文详情</span>
            </a>
        </div>

    </div>

    <div class="right-box" style="width: 100%;height: 91%;overflow: auto;padding-bottom: 1%;">
        <div style="width: 80%;margin-top: 1%;margin-left: 1%;display: inline-block;">
            <div style="width: 99%;background: white;">
                <div id="print_div"><!--startprint-->
                    <table style="width: 100%;">
                        <tr>
                            <th style="text-align: center;height: 60px;line-height: 60px;width: 100%;"><h3 style="color: red;">发文单</h3></th>
                        </tr>
                    </table>
                    <div style="padding-left: 1%;padding-right: 1%;width: 100%;color: #0b0b0b;">
                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;border-top: 1px solid red">选择模版：</td>
                                <td style="width: 30%;padding-left: 0.5%;border-top: 1px solid red">{{ examine_dict.model_name }}</td>

                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;border-top: 1px solid red">公文类型：</td>
                                <td style="width: 30%;padding-left: 0.5%;border-top: 1px solid red">{{ examine_dict.official_type }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">编号类别：</td>
                                <td style="width: 30%;padding-left: 0.5%;">{{ examine_dict.number_type }}</td>
                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">发文字号：</td>
                                <td id="dispatch-size" style="width: 30%;padding-left: 1%;">{{ examine_dict.post_name }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">密级程度：</td>
                                <td style="width: 30%;padding-left: 1%;">{{ examine_dict.accuracy_class }}</td>

                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">紧急程度：</td>
                                <td style="width: 30%;padding-left: 1%;">{{ examine_dict.urgency_degree }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">标题：</td>
                                <td id="title" style="width: 30%;padding-left: 1%;line-height: 35px;">{{ examine_dict.title }}</td>

                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;">主题词：</td>
                                <td id="subject_term" style="width: 30%;padding-left: 1%;line-height: 35px;">{{ examine_dict.subject_term }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;border-top: none">主送单位：</td>
                                <td id="lord_send_unit" style="width: 70%;height: 35px;line-height: 35px;padding-left: 1%;border-top: none">{{ examine_dict.lord_send_unit }}</td>
                            </tr>
                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;">抄送单位：</td>
                                <td id="cc_unit" style="width: 70%;height: 35px;line-height: 35px;padding-left: 1%;">{{ examine_dict.cc_unit }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;border-top: none">拟稿人：</td>
                                <td id="drafter" style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border-top: none">{{ examine_dict.drafter }}</td>

                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;border-top: none">拟稿部门：</td>
                                <td id="is_department" style="width: 30%;padding-left: 1%;line-height: 35px;border-top: none">{{ examine_dict.is_department }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;">拟稿日期：</td>
                                <td id="is_the_date" style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;">{{ examine_dict.is_the_date }}</td>

                                <td style="width: 10%;text-align: right;height: 35px;line-height: 35px;background: #F5F5F5;"></td>
                                <td style="width: 30%;padding-left: 2%;background: #F5F5F5;"></td>
                            </tr>
                        </table>

                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;border-top: none">套红分发：</td>
                                <td id="of_personnel" style="width: 70%;height: 35px;line-height: 35px;padding-left: 1%;border-top: none">
                                    {{ examine_dict.Dis_personnel }}
                                </td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;">正文：</td>
                                <td style="width: 70%;height: 35px;line-height: 35px;padding-left: 1%;">
                                    <div id="attachment_list" style="font-size: 0;margin: 0;padding: 0;">
                                        <ul style="width: 100%;padding: 0;">
                                            <li style="list-style: none;width: 100%;font-size: 14px;padding: 0;"><a style="text-decoration: none;" id="main_body_a" href="{{ examine_dict.main_body.href }}">{{ examine_dict.main_body.name }}</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 10%;height: 35px;line-height: 35px;text-align: right;">附件：</td>
                                <td style="width: 70%;height: 35px;line-height: 35px;padding-left: 1%;">
                                    <div id="attachment_list" style="font-size: 0;margin: 0;padding: 0;">
                                        <ul style="width: 100%;padding: 0;">
                                            <li id="accessory_a" style="list-style: none;width: 100%;font-size: 14px;padding: 0;">
                                                {% for acc in examine_dict.accessory %}
                                                    <p><a href="{{ acc.href }}">{{ acc.name }}</a></p>
                                                {% endfor %}
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--endprint-->

                </div>

                <iframe id="iframe1" style="display: none"></iframe>
                <div style="width: 100%;text-align: center;height: 50px;margin-top: 10px;">
                    <button onclick="but_click()" style="width: 100px;border-radius: 3px;border: #dfdfdf solid 0.5px;">打印</button>
                </div>
                <div style="height: 30px;"></div>
            </div>

            <div style="width: 99%;background: white;margin-top: 1%;padding: 1%;color: #0b0b0b;">
                <div style="width: 100%;height: 50px;text-align: center;">
                    <h4 style="color: red;">流转过程</h4>
                </div>

                <hr>

                <div id="Transfer_process" style="width: 100%;height: 400px;overflow: auto;">
                </div>
            </div>
        </div>

        <!-- 流程图 -->
        <div style="width: 17%;margin-left: 1%;display: inline-block;vertical-align: top;margin-top: 1%;background: white;padding: 2%;">
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-kaishi"></i>开始</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">发文拟稿</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="FW-hegao" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">发文核稿</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="FW-huiqian" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">发文会签</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="FW-qianfa" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">发文签发</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="taohong" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">套红分发</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-jieshu"></i>结束</button></div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        document.getElementById("administrative").className = "add-nav-active";
        document.getElementById("received-document").className = "add_class";
        document.getElementById("organizational_management_ul").style.display = "inline-block";
        document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";

        var monitoring_flag = "{{ monitoring_flag | safe }}";
        if (monitoring_flag){
            document.getElementById("received-document").removeAttribute("class");
            document.getElementById("dispatch-monitoring").className = "add_class";
        }

        var make_draft = {{ examine_dict.make_draft | safe }};
        var countersign = {{ examine_dict.countersign | safe }};
        var sign_issue = {{ examine_dict.sign_issue | safe }};
        var NuPinions = document.getElementById("NuPinions");

        var Transfer_process = document.getElementById("Transfer_process");
        for (var i=0; i<make_draft.length; i++) {
            var make_div = document.createElement("div");make_div.style.width="100%";make_div.style.height="200px";
            var make_div1 = document.createElement("div");make_div1.style.width="200px";make_div1.style.height="200px";make_div1.style.display="inline-block";make_div1.style.verticalAlign="top";
            var make_div2 = document.createElement("div");make_div2.style.width="50px";make_div2.style.height="50px";make_div2.style.display="inline-block";make_div2.style.verticalAlign="top";
            var make_img = document.createElement("img");make_img.style.borderRadius="50%";make_img.setAttribute("src", "../../static/public_file/images/user/01.jpg");
            make_div2.appendChild(make_img);
            var make_div3 = document.createElement("div");make_div3.style.width="100px";make_div3.style.height="100px";make_div3.style.display="inline-block";make_div3.style.verticalAlign="top";make_div3.style.textAlign="center";make_div3.style.lineHeight="30px";
            var make_p = document.createElement("p");make_p.style.color="#1E90FF";make_p.innerHTML=make_draft[i]["name"];
            var make_p1 = document.createElement("p");make_p1.innerHTML=make_draft[i]["department"];
            make_div3.appendChild(make_p);make_div3.appendChild(make_p1);

            var make_div4 = document.createElement("div");make_div4.style.display="inline-block";make_div4.style.verticalAlign='top';
            var make_p2 = document.createElement("p");make_p2.innerHTML=make_draft[i]["NuclearDraftOpinions"];
            var make_p3 = document.createElement("p");make_p3.style.marginTop="10%";
            var make_img1 = document.createElement("img");make_img1.style.width="200px";make_img1.style.height="80px";make_img1.setAttribute("src", make_draft[i]["signature_picture"]);
            make_p3.appendChild(make_img1);
            var make_p4 = document.createElement("p");make_p4.style.marginTop="10%";make_p4.style.width="350px";
            var make_span = document.createElement("span");make_span.style.float="left";make_span.innerHTML=make_draft[i]["approveTime"];
            var make_span1 = document.createElement("span");make_span1.style.float="right";make_span1.innerHTML="[" + make_draft[i]["current"] + " / " + make_draft[i]["type"] + "]";
            make_p4.appendChild(make_span);make_p4.appendChild(make_span1);
            make_div4.appendChild(make_p2);make_div4.appendChild(make_p3);make_div4.appendChild(make_p4);
            make_div1.appendChild(make_div2);make_div1.appendChild(make_div3);
            make_div.appendChild(make_div1);make_div.appendChild(make_div4);
            Transfer_process.appendChild(make_div);
            var hr = document.createElement("hr");
            Transfer_process.appendChild(hr);

        }

        for (var t=0; t<countersign.length; t++) {
            var counter_div = document.createElement("div");counter_div.style.width="100%";counter_div.style.height="200px";
            var counter_div1 = document.createElement("div");counter_div1.style.width="200px";counter_div1.style.height="200px";counter_div1.style.display="inline-block";counter_div1.style.verticalAlign="top";
            var counter_div2 = document.createElement("div");counter_div2.style.width="50px";counter_div2.style.height="50px";counter_div2.style.display="inline-block";counter_div2.style.verticalAlign="top";
            var counter_img = document.createElement("img");counter_img.style.borderRadius="50%";counter_img.setAttribute("src", "../../static/public_file/images/user/01.jpg");
            counter_div2.appendChild(counter_img);
            var counter_div3 = document.createElement("div");counter_div3.style.width="100px";counter_div3.style.height="100px";counter_div3.style.display="inline-block";counter_div3.style.verticalAlign="top";counter_div3.style.textAlign="center";counter_div3.style.lineHeight="30px";
            var counter_p = document.createElement("p");counter_p.style.color="#1E90FF";counter_p.innerHTML=countersign[t]["name"];
            var counter_p1 = document.createElement("p");counter_p1.innerHTML=countersign[t]["department"];
            counter_div3.appendChild(counter_p);counter_div3.appendChild(counter_p1);

            var counter_div4 = document.createElement("div");counter_div4.style.display="inline-block";counter_div4.style.verticalAlign='top';
            var counter_p2 = document.createElement("p");counter_p2.innerHTML=countersign[t]["NuclearDraftOpinions"];
            var counter_p3 = document.createElement("p");counter_p3.style.marginTop="10%";
            var counter_img1 = document.createElement("img");counter_img1.style.width="200px";counter_img1.style.height="80px";counter_img1.setAttribute("src", countersign[t]["signature_picture"]);
            counter_p3.appendChild(counter_img1);
            var counter_p4 = document.createElement("p");counter_p4.style.marginTop="10%";counter_p4.style.width="350px";
            var counter_span = document.createElement("span");counter_span.style.float="left";counter_span.innerHTML=make_draft[t]["approveTime"];
            var counter_span1 = document.createElement("span");counter_span1.style.float="right";counter_span1.innerHTML="[" + countersign[t]["current"] + " / " + countersign[t]["type"] + "]";
            counter_p4.appendChild(counter_span);counter_p4.appendChild(counter_span1);
            counter_div4.appendChild(counter_p2);counter_div4.appendChild(counter_p3);counter_div4.appendChild(counter_p4);
            counter_div1.appendChild(counter_div2);counter_div1.appendChild(counter_div3);
            counter_div.appendChild(counter_div1);counter_div.appendChild(counter_div4);
            Transfer_process.appendChild(counter_div);
            var counter_hr = document.createElement("hr");
            Transfer_process.appendChild(counter_hr);
        }

        for (var j=0; j<sign_issue.length; j++) {
            var sign_div = document.createElement("div");sign_div.style.width="100%";sign_div.style.height="200px";
            var sign_div1 = document.createElement("div");sign_div1.style.width="200px";sign_div1.style.height="200px";sign_div1.style.display="inline-block";sign_div1.style.verticalAlign="top";
            var sign_div2 = document.createElement("div");sign_div2.style.width="50px";sign_div2.style.height="50px";sign_div2.style.display="inline-block";sign_div2.style.verticalAlign="top";
            var sign_img = document.createElement("img");sign_img.style.borderRadius="50%";sign_img.setAttribute("src", "../../static/public_file/images/user/01.jpg");
            sign_div2.appendChild(sign_img);
            var sign_div3 = document.createElement("div");sign_div3.style.width="100px";sign_div3.style.height="100px";sign_div3.style.display="inline-block";sign_div3.style.verticalAlign="top";sign_div3.style.textAlign="center";sign_div3.style.lineHeight="30px";
            var sign_p = document.createElement("p");sign_p.style.color="#1E90FF";sign_p.innerHTML=sign_issue[j]["name"];
            var sign_p1 = document.createElement("p");sign_p1.innerHTML=sign_issue[j]["department"];
            sign_div3.appendChild(sign_p);sign_div3.appendChild(sign_p1);

            var sign_div4 = document.createElement("div");sign_div4.style.display="inline-block";sign_div4.style.verticalAlign='top';
            var sign_p2 = document.createElement("p");sign_p2.innerHTML=sign_issue[j]["NuclearDraftOpinions"];
            var sign_p3 = document.createElement("p");sign_p3.style.marginTop="10%";
            var sign_img1 = document.createElement("img");sign_img1.style.width="200px";sign_img1.style.height="80px";sign_img1.setAttribute("src", countersign[j]["signature_picture"]);
            sign_p3.appendChild(sign_img1);
            var sign_p4 = document.createElement("p");sign_p4.style.marginTop="10%";sign_p4.style.width="350px";
            var sign_span = document.createElement("span");sign_span.style.float="left";sign_span.innerHTML=sign_issue[j]["approveTime"];
            var sign_span1 = document.createElement("span");sign_span1.style.float="right";sign_span1.innerHTML="[" + sign_issue[j]["current"] + " / " + sign_issue[j]["type"] + "]";
            sign_p4.appendChild(sign_span);sign_p4.appendChild(sign_span1);
            sign_div4.appendChild(sign_p2);sign_div4.appendChild(sign_p3);sign_div4.appendChild(sign_p4);
            sign_div1.appendChild(sign_div2);sign_div1.appendChild(sign_div3);
            sign_div.appendChild(sign_div1);sign_div.appendChild(sign_div4);
            Transfer_process.appendChild(sign_div);
            var sign_hr = document.createElement("hr");
            Transfer_process.appendChild(sign_hr);
        }

        function but_click() {
             bdhtml=document.getElementById("print_div").innerHTML;
             sprnstr="<!--startprint-->";   //开始打印标识字符串有17个字符
             eprnstr="<!--endprint-->";        //结束打印标识字符串
             prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
             prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容
             var iframe = null;
             iframe = document.getElementById("iframe1");

             var htmlToPrint = '' +
            '<style type="text/css">' +
                'table {'+
                    'border-collapse:collapse;' +
                '}' +
                'table td{'+
                    'border-top: 1px solid red;'+
                    'border-left: 1px solid red;'+
                    'border-bottom: 1px solid red;'+
                    'border-right: 1px solid red;'+
                    'border-collapse: separate;'+
                '}'+
            '</style>';
             htmlToPrint += prnhtml;
             var iwindow = null;
             var iwindow = iframe.contentWindow;//获取iframe的window对象
             iwindow.document.close();
             iwindow.document.write(htmlToPrint);
             iwindow.print(); //调用浏览器的打印功能打印指定区域
         }
        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}
